<script setup lang="ts">
import type {ColumnsType} from "ant-design-vue/es/table";
import {ApiGetOperatorList} from "~/api/operator";
import type {TableProps} from "ant-design-vue/lib";
definePageMeta({
  layout:"backend"
})

const permissions = usePermissions()
const { t } = useI18n()
const paginate = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  search: "",
  position: ["bottomCenter"]
})
const table_data = ref([])

const columns: ColumnsType = [
  {
    title: t('operator.username'),
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: t('operator.real_name'),
    dataIndex: 'real_name',
    key: 'real_name'
  },
  {
    title: t('operator.status'),
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: t('operator.passport_no'),
    dataIndex: 'passport_no',
    key: 'passport_no',
  },
  {
    title: t('operator.card_no'),
    dataIndex: 'card_no',
    key: 'card_no',
  },
  {
    title: t('operator.organization'),
    dataIndex: 'organization_name',
    key: 'organization_name',
  },
  {
    title: t('common.action'),
    dataIndex: 'action',
    key: 'action',
  },
];

function refresh(){
  ApiGetOperatorList({
    page: paginate.current,
    search: paginate.search,
    limit: paginate.pageSize
  }).then((res)=>{
    paginate.total = res.data.total
    paginate.current = res.data.page
    paginate.pageSize = res.data.limit
    table_data.value = res.data.data
  })
}
refresh()

const on_table_changed : TableProps['onChange'] = (pagination, filters, sorter, extra) => {
  paginate.current = pagination.current;
  paginate.pageSize = pagination.pageSize
  refresh()
}


</script>

<template>
  <div class="bg-white p-5 flex-col flex gap-5 overflow-auto">
    <div class="flex justify-center items-center gap-3">
      <div class="flex-1">
        <span class="text-4xl">{{ $t("sidebar.system.operator")}}</span>
      </div>
      <a-button type="primary"  v-if="permissions? permissions['sys.create_operator']:false">{{$t("operator.create")}}</a-button>
      <a-input class="w-2/12" v-model:value="paginate.search"/>
      <a-button @click="refresh">{{$t("common.search")}}</a-button>
    </div>
    <div class="flex-1 flex p-2">
      <a-table sticky class="flex-1" :columns="columns" :pagination="paginate" :data-source="table_data" @change="on_table_changed">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <div>
              <edit-outlined v-if="permissions? permissions['sys.update_operator']:false" class="text-xl text-green-600 cursor-pointer"/>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>

  <a-modal></a-modal>
</template>

<style scoped>
:deep(.ant-table-cell){
  text-wrap: nowrap;
}
</style>
